<template>
  <footer class="relative bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white overflow-hidden">
    <!-- 科技感背景装饰 -->
    <div class="absolute inset-0 overflow-hidden">
      <!-- 网格背景 -->
      <div class="absolute inset-0 opacity-10">
        <div class="grid-pattern"></div>
      </div>
      
      <!-- 浮动粒子效果 -->
      <div class="absolute top-10 left-10 w-2 h-2 bg-cyan-400 rounded-full animate-pulse opacity-60"></div>
      <div class="absolute top-20 right-20 w-1 h-1 bg-blue-400 rounded-full animate-ping opacity-40"></div>
      <div class="absolute bottom-20 left-1/4 w-1.5 h-1.5 bg-purple-400 rounded-full animate-pulse opacity-50"></div>
      <div class="absolute top-1/2 right-10 w-1 h-1 bg-green-400 rounded-full animate-ping opacity-30"></div>
      <div class="absolute bottom-10 right-1/3 w-2 h-2 bg-yellow-400 rounded-full animate-pulse opacity-40"></div>
      
      <!-- 渐变光效 -->
      <div class="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-cyan-400 to-transparent opacity-30"></div>
      <div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-blue-400 to-transparent opacity-30"></div>
    </div>

    <div class="relative z-10 max-w-7xl mx-auto px-6 sm:px-8 lg:px-12 py-12">

      <!-- 底部版权信息 -->
      <div class="mt-8 pt-6">
        
        <div class="flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0">
          <!-- 版权信息 -->
          <div class="text-center lg:text-left space-y-2">
            <div class="flex items-center space-x-2">
              <div class="w-1.5 h-1.5 bg-cyan-400 rounded-full animate-pulse"></div>
              <p class="text-gray-300 text-sm font-medium">
                © {{ currentYear }} 佳茗. 保留所有权利.
              </p>
            </div>
            <p class="text-gray-400 text-xs italic ml-3.5">
              用代码改变世界，用文字记录成长
            </p>
          </div>
          
          <!-- 技术栈信息 -->
          <div class="flex flex-col sm:flex-row items-center space-y-3 sm:space-y-0 sm:space-x-6">
            <div class="bg-gray-800/30 backdrop-blur-sm rounded-lg px-4 py-2 border border-gray-700/50">
              <div class="flex items-center space-x-3 text-xs">
                <span class="text-gray-400 font-medium">Powered by</span>
                <div class="flex items-center space-x-2">
                  <span class="text-cyan-400 font-mono font-semibold hover:text-cyan-300 transition-colors duration-300 cursor-pointer">Vue.js</span>
                  <div class="w-0.5 h-0.5 bg-gray-600 rounded-full"></div>
                  <span class="text-blue-400 font-mono font-semibold hover:text-blue-300 transition-colors duration-300 cursor-pointer">Tailwind CSS</span>
                  <div class="w-0.5 h-0.5 bg-gray-600 rounded-full"></div>
                  <span class="text-purple-400 font-mono font-semibold hover:text-purple-300 transition-colors duration-300 cursor-pointer">Vite</span>
                </div>
              </div>
            </div>
            
            <!-- 装饰性元素 -->
            <div class="flex items-center space-x-2">
              <div class="w-1.5 h-1.5 bg-cyan-400 rounded-full animate-pulse"></div>
              <div class="w-8 h-0.5 bg-gradient-to-r from-cyan-400/60 via-blue-400/40 to-transparent"></div>
              <div class="w-1.5 h-1.5 bg-blue-400 rounded-full animate-pulse" style="animation-delay: 0.5s;"></div>
              <div class="w-6 h-0.5 bg-gradient-to-r from-transparent via-purple-400/40 to-transparent"></div>
              <div class="w-1 h-1 bg-purple-400 rounded-full animate-pulse" style="animation-delay: 1s;"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { computed } from 'vue'

const currentYear = computed(() => new Date().getFullYear())
</script>

<style scoped>
/* 网格背景图案 */
.grid-pattern {
  background-image: 
    linear-gradient(rgba(6, 182, 212, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  animation: grid-move 20s linear infinite;
}

@keyframes grid-move {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(20px, 20px);
  }
}

/* 自定义动画 */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(6, 182, 212, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.6), 0 0 30px rgba(6, 182, 212, 0.4);
  }
}

/* 链接悬停效果 */
.group:hover .group-hover\:translate-x-2 {
  transform: translateX(0.5rem);
}

/* 科技感文字效果 */
.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}
</style>
